const TagCard = ({ tag }) => {
  return (
    <div className="bg-white p-4 rounded-md shadow-md hover:shadow-xl transition-all border border-gray-200">
      <div className="flex items-center mb-2">
        <span className="bg-gray-200 text-gray-800 px-3 py-1 rounded-md text-sm font-semibold">
          {tag.name}
        </span>
      </div>
      <p className="text-sm text-gray-600 mb-4">{tag.description}</p>
      <div className="flex justify-between text-xs text-gray-500">
        <div>
          <p>
            <strong>{tag.totalQuestions.toLocaleString()}</strong> questions
          </p>
        </div>
        <div className="text-right">
          <p>{tag.daily} asked today</p>
          <p>{tag.weekly} this week</p>
        </div>
      </div>
    </div>
  );
};

export default TagCard;
